1
00:00:00,750 --> 00:00:03,860
Hello and welcome to this lecture.

2
00:00:03,990 --> 00:00:12,420
In this lecture we are going to be creating the stylin for how a calculator using skill sets.

3
00:00:12,570 --> 00:00:20,920
So we'll be using the combination of external success and in line C assess.

4
00:00:21,160 --> 00:00:26,310
So this is what the calculator looks like at the moment.

5
00:00:26,340 --> 00:00:35,260
So by the time we're done with this lecture he should look a little bit prettier.

6
00:00:35,380 --> 00:00:38,680
So this is my test it on.

7
00:00:38,710 --> 00:00:40,600
And this is my style sheet.

8
00:00:40,620 --> 00:00:47,380
WHERE WERE will implement the external violin for the couple later.

9
00:00:47,580 --> 00:00:57,300
The way I'm going to structure this lecture is to add a chunk of code at a time and then explain it

10
00:00:57,360 --> 00:00:58,300
to you.

11
00:01:00,700 --> 00:01:01,320
Okay.

12
00:01:01,360 --> 00:01:06,830
I have added some code from line 1 to line 10.

13
00:01:07,000 --> 00:01:10,970
So let me run through this some of these you may already know.

14
00:01:11,830 --> 00:01:15,800
The lie one here got input input.

15
00:01:15,850 --> 00:01:22,440
This is known as the Selecta so you must have something that you want to do something to.

16
00:01:22,450 --> 00:01:30,880
For example if you are going to have your hair cut your hair will be the selector and then you have

17
00:01:30,880 --> 00:01:33,720
to tell the Barbar what to do to the head.

18
00:01:33,850 --> 00:01:36,590
So here's how it works in the same way.

19
00:01:36,730 --> 00:01:41,650
Input here is to select all the items in blue here.

20
00:01:41,650 --> 00:01:48,810
This on the items on the left of the colon is known as the property.

21
00:01:48,970 --> 00:01:54,460
The property is what we want to apply to the selector.

22
00:01:54,510 --> 00:02:03,880
The values outside the call on here is that that is what we wanted to have for example how one with

23
00:02:04,210 --> 00:02:09,890
which is a property of that input to be a hundred and fifty pixels white.

24
00:02:10,150 --> 00:02:20,350
Okay so you separate the property from the value with a colon and then you end with a semicolon without

25
00:02:20,390 --> 00:02:22,900
so my call on it will not work.

26
00:02:23,050 --> 00:02:27,850
So make sure you end with a semicolon once you finished the height.

27
00:02:27,850 --> 00:02:34,870
I've set it to that the font size which is the size of the text I have set it to this.

28
00:02:35,210 --> 00:02:42,440
The border radios body radius is what gives it a beat of rounded corner so this isn't brother Bob but

29
00:02:42,450 --> 00:02:46,800
I rate as property and I'll sell it to 10 pixels.

30
00:02:46,900 --> 00:02:48,130
These values.

31
00:02:48,190 --> 00:02:52,950
Feel free to play around with them so that you can see how they work.

32
00:02:52,960 --> 00:03:00,120
The beauty of browser development is that you can see what the result of forger develop in straightaway

33
00:03:00,280 --> 00:03:01,580
away.

34
00:03:01,780 --> 00:03:04,520
The marjane have given it 10 pixels.

35
00:03:04,720 --> 00:03:08,420
Margin refers to this space outside.

36
00:03:08,470 --> 00:03:10,310
So for example you've got a box.

37
00:03:10,420 --> 00:03:13,380
So this base outside is known as a margin.

38
00:03:13,630 --> 00:03:17,580
Why the space inside is known as padden.

39
00:03:17,680 --> 00:03:21,760
So where you've got wide margin is usually four corners.

40
00:03:21,760 --> 00:03:26,220
You've got the top the right the bottom and the left.

41
00:03:26,290 --> 00:03:32,990
That's how the styling is applied the way I remember it is by using the word trouble and then taking

42
00:03:33,040 --> 00:03:33,880
out the valves.

43
00:03:33,880 --> 00:03:35,090
We shall the holes.

44
00:03:35,230 --> 00:03:40,470
That leaves you with top right bottom left.

45
00:03:40,960 --> 00:03:47,650
So when you have just two one values specified it for use a value on or the four corners like.

46
00:03:47,650 --> 00:03:54,960
Top right bottom left background column I've set it to this have use HEX collar hexadecimal Quellos.

47
00:03:55,090 --> 00:03:56,850
You can also use the name of the collar.

48
00:03:56,860 --> 00:04:02,820
If you know it for example this means black so I could use black instead of that.

49
00:04:02,820 --> 00:04:08,110
And then the colour colour here offence refers to the colour of the text.

50
00:04:08,110 --> 00:04:16,420
So this is white in exact values and then body style is not so I don't want any shadow or anything on

51
00:04:16,420 --> 00:04:17,200
the borders.

52
00:04:17,470 --> 00:04:23,580
So this is a stylin for the input input.

53
00:04:23,590 --> 00:04:24,790
Basically is free.

54
00:04:24,820 --> 00:04:35,860
If the business is failing for the input tech I have added some more could hear from line 12 to 24 line

55
00:04:35,880 --> 00:04:36,270
12.

56
00:04:36,280 --> 00:04:40,080
Here I've got my I've got an idea here.

57
00:04:40,300 --> 00:04:43,090
You identify an idea with the hash tag.

58
00:04:43,120 --> 00:04:43,900
So I do.

59
00:04:43,900 --> 00:04:47,980
Here is my form so move form here.

60
00:04:47,980 --> 00:04:53,580
These are the stylin I have applied to it might on me.

61
00:04:53,660 --> 00:04:55,240
This is just a comment.

62
00:04:55,240 --> 00:05:02,680
So if you want to write a comment on a on a Seer says this is how you implement a comment.

63
00:05:02,890 --> 00:05:08,070
So anything they have to comment on will not reflect on the styling.

64
00:05:08,260 --> 00:05:10,180
Okay so comments are quite good.

65
00:05:10,280 --> 00:05:13,650
He can use them for troubleshooting or trying things out.

66
00:05:13,870 --> 00:05:15,700
So this idea here.

67
00:05:15,720 --> 00:05:18,820
This is the stylin I'm giving to the idea.

68
00:05:19,060 --> 00:05:26,350
I want the margin from the one margin on the left to be two hundred and twenty five pixels so what I'm

69
00:05:26,350 --> 00:05:35,650
saying is that from the left of the from the left I want it to move two hundred twenty five pixels and

70
00:05:35,650 --> 00:05:40,560
then from the top I want it to drop down 20 pixels.

71
00:05:40,570 --> 00:05:42,070
That's what that means.

72
00:05:42,070 --> 00:05:42,790
And then this.

73
00:05:42,880 --> 00:05:47,480
Here is this filing for the H1 tag which is the head tag.

74
00:05:47,480 --> 00:05:55,040
Again the text allowing want the text to be centred have given me a font size of 80 pixels.

75
00:05:55,060 --> 00:05:58,080
That's how big I want it to be in the margin.

76
00:05:58,090 --> 00:05:59,830
I've said from the right.

77
00:06:00,530 --> 00:06:05,620
I want to move fit one 50 pixels from the top.

78
00:06:05,650 --> 00:06:14,840
And one is to drop 20 pixels so let's save that and see what he did or looks like at the moment.

79
00:06:14,840 --> 00:06:18,540
So this is our calculate on fire refresh.

80
00:06:18,590 --> 00:06:22,290
This is what iscar SEE is looking a little bit prettier.

81
00:06:22,640 --> 00:06:23,000
Okay.

82
00:06:23,030 --> 00:06:28,140
So this is what it looks like at the moment with this filing we have used.

83
00:06:28,430 --> 00:06:31,290
Next we are going to use some inline styling.

84
00:06:31,310 --> 00:06:37,670
That means we're going to go inside the hastier mail document and apply the stylin in line with the

85
00:06:37,840 --> 00:06:39,220
tool tag.

86
00:06:39,830 --> 00:06:40,270
Okay.

87
00:06:40,280 --> 00:06:49,310
So I am on the yellow shawl here CML documents which is that in his email here had on line 17 which

88
00:06:49,310 --> 00:06:55,880
is the actual import for the display which is the screen that would display the results of the couple

89
00:06:55,880 --> 00:06:56,690
later.

90
00:06:56,940 --> 00:07:00,090
Her title Tom into line styling.

91
00:07:00,320 --> 00:07:03,750
So this is inside the outboard tag itself.

92
00:07:04,040 --> 00:07:09,930
I have a style tag so you begin Will you use this style as an attribute.

93
00:07:09,920 --> 00:07:17,960
So the actual style becomes an attribute and value would be the become the property and the values for

94
00:07:18,200 --> 00:07:19,530
that input tag.

95
00:07:19,560 --> 00:07:29,700
So this input tank here has given it a wave of 6 7 5 pixels have given a height of that detect harline

96
00:07:29,780 --> 00:07:30,760
to be Centre.

97
00:07:30,830 --> 00:07:36,330
Miss any text that is that it displays and want it to be centred.

98
00:07:36,380 --> 00:07:43,810
Given the background of this and this brigg tag you're basically kristo space underneath it.

99
00:07:43,820 --> 00:07:49,640
So if I save that and refresh you should see the displays should be blue.

100
00:07:49,640 --> 00:07:51,530
Now you can see here.

101
00:07:51,620 --> 00:07:56,100
It is now blue so this is what we have just applied stylee to.

102
00:07:58,520 --> 00:08:04,040
I have added some more in a line stylin inside the hatim old document.

103
00:08:04,250 --> 00:08:07,120
Saw on line 21 here.

104
00:08:07,250 --> 00:08:15,140
I want the bottas for the operators that me the plus the minus the equals at times and a division.

105
00:08:15,140 --> 00:08:22,770
I want them all have different colours so that's the styling I have implemented line 21 here.

106
00:08:22,910 --> 00:08:30,510
Not is I've used this baule here as an attribute and then the value equal to the properties.

107
00:08:30,560 --> 00:08:34,300
The property I want a style and then the value for the property.

108
00:08:34,370 --> 00:08:40,390
So the background colloquy are both gleib set the bag quoll for the plus have said the background colour

109
00:08:40,410 --> 00:08:53,630
online 25 for the miners had on online 29 for their times online thirty one for the see which is éclair

110
00:08:53,630 --> 00:08:54,260
function.

111
00:08:54,260 --> 00:09:02,300
Now are you clear the screen and horn line thirty three for the deficients.

112
00:09:02,300 --> 00:09:07,500
I've said that to green so I'll save that and fire launch the browser.

113
00:09:07,820 --> 00:09:10,320
You should see the difference.

114
00:09:10,540 --> 00:09:17,750
So you can see all the operators have different background quellos and also have made the sea here.

115
00:09:17,870 --> 00:09:23,070
Give me a different background so this is what will clear you use to clear values.

116
00:09:23,090 --> 00:09:29,840
So if I press on the bottom we can see nothing is happening at the moment the Jav us group all create

117
00:09:29,870 --> 00:09:32,360
the functionality for that.

118
00:09:32,360 --> 00:09:40,100
So for this lecture we had done the stylin of the calculator was ready in the next lecture will implement

119
00:09:40,130 --> 00:09:47,010
the java script to make the bottoms actually work and perform some calculation.

120
00:09:47,030 --> 00:09:48,070
Take care.

121
00:09:48,080 --> 00:09:49,310
Bye for now.